<template>
  <view>
    <view class="header">
      <view class="container">
        <!-- 搜索框 -->
        <view class="search-box">
          <input
            type="text"
            placeholder="请输入搜索内容"
            v-model="searchText"
            @input="onInput"
            @confirm="onSearch"
          />
          <button @click="onSearch">搜索</button>
        </view>
        <!-- 显示搜索结果 -->
        <view v-if="searchText">
          <text>你搜索的内容是：{{ searchText }}</text>
        </view>
      </view>
    </view>
    <!-- 图片部分 -->
    <view>
      <img src="/static/assets/02.jpg" alt="" style="width:100% ;height: 100px;">
    </view>
    <!-- 内容区1 -->
    <view class="bodyone">
      <view class="bodyone_1">
        <img src="/static/assets/super.png" alt="" class="image_one">
        超市便利
      </view>
      <view class="bodyone_1">
        <img src="/static/assets/market.png" alt="" class="image_one">
        菜市场
      </view>
      <view class="bodyone_1">
        <img src="/static/assets/fruits.png" alt="" class="image_one">
        水果店
      </view>
      <view class="bodyone_1">
        <img src="/static/assets/flower.png" alt="" class="image_one">
        鲜花绿植
      </view>
      <view class="bodyone_1">
        <img src="/static/assets/drug.png" alt="" class="image_one">
        医药健康
      </view>
      <view class="bodyone_1">
        <img src="/static/assets/home.png" alt="" class="image_one">
        家居时尚
      </view>
      <view class="bodyone_1">
        <img src="/static/assets/cake.png" alt="" class="image_one">
        烘焙蛋糕
      </view>
      <view class="bodyone_1">
        <img src="/static/assets/sign.png" alt="" class="image_one">
        签到
      </view>
      <view class="bodyone_1">
        <img src="/static/assets/prestige.png" alt="" class="image_one">
        大牌免运
      </view>
      <view class="bodyone_1">
        <img src="/static/assets/red.png" alt="" class="image_one">
        红包套餐
      </view>
    </view>
    <!-- 内容区2 店铺信息 -->
    <view class="container3">
      <!-- 热门商家列表 -->
      <view class="hot-list">
        <view
          v-for="(item) in product.data"
          :key="item._id"
          class="shop-card"
          @click="ontext(item._id)"
        >
          <image class="shop-image" :src="item.imgUrl" mode="aspectFill"></image>
          <view class="shop-info">
            <view class="shop-name">{{ item.name }}</view>
            <view class="shop-sales">月售 {{ item.sales }} 单</view>
            <view class="shop-delivery">
              <text v-if="item.expressLimit > 0">¥{{ item.expressLimit }}起送</text>
              <text>配送费 ¥{{ item.expressPrice }}</text>
            </view>
            <view class="shop-slogan">{{ item.slogan }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import config from "@/Config.js";
export default {
  data() {
    return {
      title: 'Hello',
      product: [],
      searchText: ''
    }
  },
  onLoad() {
    this.query()
  },
  methods: {
    query() {
      uni.request({
        url: config.config+'/hotlist',
        method: 'GET',
        header: {
          'Content-Type': 'application/json'
        },
        success: (res) => {
          console.log('请求成功:', res)
          this.product = res
        }
      })
    },
    ontext(_id) {
      console.log(_id)
      uni.navigateTo({
        url: '/pages/detail/detail?id=' + _id
      })
    }
  }
}
</script>

<style>
.container {
  padding: 50px;
}

.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  background-color: aliceblue;
  height: 35px;
  margin-top: -20px;
}

.search-box input {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
  background-color: aliceblue;
}

.search-box button {
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  cursor: pointer;
}

.header {
  width: 100%;
  height: 80px;
  background-color: #007aff;
}

.bodyone {
  width: 100%;
  min-height: 200px;
  background: linear-gradient(to bottom, #1e90ff, #87cefa, #ffffff);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px 10px 30px;
  justify-content: center;
  box-sizing: border-box;
}

.bodyone_1 {
  width: calc(20% - 8px);
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: 13px;
  border-radius: 8px;
  transition: transform 0.2s;
}

.bodyone_1:hover {
  transform: translateY(-3px);
}

.image_one {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

.container3 {
  padding: 20rpx;
  background-color: #f5f5f5;
  width: 100%;
  height: 500px;
}

.hot-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.shop-card {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.shop-image {
  width: 120rpx; /* 减小图片宽度 */
  height: 120rpx; /* 减小图片高度 */
}

.shop-info {
  flex: 1;
  padding: 15rpx; /* 减小内边距 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.shop-sales {
  font-size: 16rpx;
  color: #666;
}

.shop-delivery {
  font-size: 16rpx;
  color: #666;
  display: flex;
  gap: 20rpx;
}

.shop-slogan {
  font-size: 16rpx;
  color: #e93b3b;
  padding: 8rpx 12rpx;
  background-color: #ffeeee;
  border-radius: 8rpx;
  align-self: flex-start;
}
</style>